<template>
  <div></div>
</template>
<script setup>
import { Leafer, Frame, Group } from 'leafer-ui';
const leafer = new Leafer({
  view: window
})
const page1 = new Frame({
  x: 100,
  y: 100,
  width: 200,
  height: 200,
  fill: 'red',
  animation: {
    keyframes: [
      { opacity: 0, offsetX: -200 },
      { opacity: 1, offsetX: 0 },
    ],
    duration: 1,
  },
  animationOut: {
    style: {
      opacity: 0,
      offsetX: 200
    },
    duration: 1
  }
})
const page2 = page1.clone({ fill: 'blue' })
const group = new Group({
  children: [page1]
})
leafer.add(group)
setInterval(() => {
  if (page1.parent) {
    group.add(page2)
    page1.remove()
  } else {
    group.add(page1)
    page2.remove()
  }
}, 2000)
</script>
<style scoped></style>